<template>
  <div style="padding-top: 80px">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
    >
      <el-form-item :label="labelNameUser" prop="nickname">
        <el-input v-model="ruleForm.nickname"  style="width: 260px"/>
      </el-form-item>
      <el-form-item :label="labelNamePassword" prop="pwd">
        <el-input v-model="ruleForm.pwd" type="password" show-password style="width: 260px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          {{ btnNameUserCreate }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UserService from "@/service/UserService";
import DefaultMessageHandler from "@/utils/DefaultMessageHandler";
import UserSessionService from "@/service/UserSessionService";

export default {
  name: 'Login',
  data () {
    return {
      labelNameUser: chrome.i18n.getMessage('userContentLabelUser'),
      labelNamePassword: chrome.i18n.getMessage('userContentLabelPassword'),
      btnNameUserCreate: chrome.i18n.getMessage('userContentBtnUserCreate'),
      ruleForm: {
        nickname: '',
        pwd: ''
      },
      rules: {
        nickname: [
            { required: true, message: chrome.i18n.getMessage('userContentRuleFormNickname'), trigger: 'blur' }
        ],
        pwd: [
            { required: true, message: chrome.i18n.getMessage('userContentRuleFormPwd'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      this.$refs.ruleFormRef.validate(valid => {
        if (valid) {
          UserService.login(Object.assign({}, this.ruleForm), (data) => {
            console.log('login success:', data)
            UserSessionService.saveToken(data.login_token)
            UserSessionService.saveUserInfo(data)
            this.$emit('loginSuccess')
          }, (err) => {
            DefaultMessageHandler.error(err, this)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>